* {
  margin: 0;
  padding: 0;
}
@define-width: 750;
.w {
  width: 693rem/40;
  margin: 0 auto;
}
// 设置视口
html {
  font-size: 100vw / @define-width * 40;
  background-color: #eff0f4;
}
.top-bar:extend(.w) {
  // 开启弹性盒子
  display: flex;
  height: 175rem/40;
  line-height: 175rem/40;
  justify-content: space-between;
  // 设置辅轴对齐
  align-items: center;
  a {
    color: #24253d;
    font-size: 50rem/40;
    i {
      color: #999;
      font-size: 40rem/40;
    }
  }
}
a {
  text-decoration: none;
}

.banner:extend(.w) {
  img {
    width: 100%;
  }
}
// 设置中间菜单
.menu:extend(.w) {
  height: 329rem/40;
  display: flex;
  justify-content: space-between;
  align-content: space-around;
  flex-flow: row wrap;
  a {
    width: 327rem/40;
    height: 104rem/40;
    line-height: 104rem/40;
    // text-align: center;
    color: white;
    border-radius: 12px;
    i {
      margin: 0 32rem/40 0 38rem/40;
    }
  }
  .course {
    background-color: #f97053;
  }
  .star {
    background-color: #cd6efe;
  }
  .subp {
    background-color: #fe4479;
  }
  .download {
    background-color: #1bc4fb;
  }
}
.course-list:extend(.w) {
  height: 394rem/40;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  margin-bottom: 46rem/40;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h2 {
      font-size: 33rem/40;
      color: #24253d;
      border-left: 2px solid #3a84ff;
      padding-left: 5px;
    }
    a {
      font-size: 28rem/40;
      color: #656565;
    }
  }
}
// 设置课程列表项
.item-list {
    display: flex;
    overflow: auto;
}
.item {
    flex: none;
  box-sizing: border-box;
  width: 320rem/40;
  height: 324rem/40;
  padding: 0 22rem/40;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  display: flex;
  flex-flow: column;
  justify-content: space-evenly;
  margin-right: 24rem/40;
  img {
    width: 100%;
    vertical-align: top;
  }
  .course-tilte {
    font-size: 32rem/40;
    color: #24253d;
  }
  .user-info {
    display: flex;
    align-items: center;
  }
  .avater {
    width: 40rem/40;
    height: 40rem/40;
  }
  .user-name {
    margin-left: 6px;
    font-size: 24rem/40;
    color: #969393;
  }
}
